import Taro, { Component } from "@tarojs/taro";
import { View, Input, Picker, Image,Form,Button } from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime} from '../../utils/common'
import {IStoreProps} from '../../store/Stores'

import './index.less'
import './bank_card.less'

import right from '../../assets/img/right.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page3 extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    allBank: [],
    currentIndex:0,
    bankCode: '',
    bankName: ''
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'添加银行卡' })
    this.getAllBank()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getAllBank() {
    let { userStore }  = this.props.stores
    userStore.getBanks({
      callback: res => {
        let allBank = toJS(res.items)
        if(allBank){
          this.setState({
            allBank
          })
        }
      }
    })
  }

  changeBank(e) {
    this.setState({
      currentIndex: e.detail.value
    })
  }

  onSubmit(e) {
    let { cardName,cardNumber } = e.detail.value
    let {allBank,currentIndex} = this.state
    let { userStore } = this.props.stores

    if(!cardName){ getRuntime().showToast('请填写持卡人姓名~');return }
    if(!cardNumber){ getRuntime().showToast('请填写银行卡卡号~');return; }
    // if(!isNumber(cardName)){ getRuntime().showToast('银行卡卡号只能为数字~');return; }
    userStore.saveUserCard({
      form: {
        cardName,
        cardNumber,
        bankCode: allBank[currentIndex]['bankCode'],
        bankName: allBank[currentIndex]['bankName']
      },
      callback: res => {
        getRuntime().showToast('添加银行卡成功~')
        setTimeout(() => {
          getRuntime().navigateBack()
        },2000)
      }
    })
  }

  render() {
    let {allBank,currentIndex} = this.state
    return(
      <View className='from-wrap'>
        <Form onSubmit={this.onSubmit.bind(this)}>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name'>持卡人</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写持卡人' name='cardName'/>
            </View>
            <View className='input-group'>
              <View className='input-name'>银行卡号</View>
              <Input className='from-input' type="number" name='cardNumber' maxLength={19} placeholderClass='placeholder_class' placeholder='请填写19位银行卡号' />
            </View>
            <View className='input-group '>
              <View className='input-name'>开户行</View>
              <Picker className='input-picker' mode='multiSelector' rangeKey='bankName' range={[allBank]} onChange={this.changeBank.bind(this)}>
                <View className='tt'>
                  <View className='from-input picker-con' >{allBank[currentIndex]['bankName']}</View>
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>
          </View>
          <Button className='from-submit page-from-submit' formType={"submit"}>确定添加</Button>
        </Form>
      </View>
    )
  }
}

export default Page3
